/* eslint react/prefer-stateless-function:0, react/prop-types:0 */

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Modal, Table } from 'antd';
import Wrapper from './wrapper';
import style from './style.css';
import * as actions from '../../actions/memberAction';
import BraftEditor from 'braft-editor';

@connect((state) => ({
  member: state.admin.member,
}), actions)
export default class extends Component {

  constructor(props) {
    super(props);
    this.openModal = this.openModal.bind(this);
  }

  componentDidMount() {
    this.props.getAll();
  }

  openModal(record) {
    if (this.editorInstance) {
      this.editorInstance.setContent(record.info);
    }
    this.props.openModal(record);
  }

  render() {
    const { member, uploadImg, hideModal, save, updateModalContent } = this.props;
    const { modalShow, modalName, modalContent } = member;
    const columns = [
      {
        title: 'id',
        dataIndex: 'id',
        key: 'id',
      },
      {
        title: '用户名',
        dataIndex: 'username',
        key: 'username',
      },
      {
        title: '手机号',
        dataIndex: 'phone',
        key: 'phone',
      },
      {
        title: '注册时间',
        dataIndex: 'join_time',
        key: 'join_time',
      },
      {
        title: '投资信息',
        key: 'info',
        render: (text, record) => (
          <a onClick={() => this.openModal(record)}>更新</a>
        ),
      }
    ];
    const editorProps = {
      height: 400,
      initialContent: modalContent,
      contentFormat: 'html',
      placeholder: '请填写内容',
      onHTMLChange: updateModalContent,
      controls: [
        'undo', 'redo', 'split', 'font-size', 'font-family', 'text-color',
        'bold', 'italic', 'underline', 'strike-through', 'text-align', 'split', 'headings', 'list_ul', 'list_ol',
        'split', 'link', 'split', 'media'
      ],
      media: {
        image: true,
        video: false,
        audio: false,
        validateFn: null, // 指定本地校验函数，说明见下文
        uploadFn: uploadImg, // 指定上传函数，说明见下文
        externalMedias: {
          image: false,
          audio: false,
          video: false,
        },
      },
    };

    return (
      <Wrapper openKeys="member" selectedKeys="all">
        <div className={style.pageTitle}>所有用户</div>
        <Table rowKey="id" columns={columns} dataSource={member.data} />
        <Modal
          title={`${modalName}的投资信息`}
          visible={modalShow}
          onOk={save}
          okText="确定"
          cancelText="取消"
          maskClosable={false}
          onCancel={hideModal}
          zIndex={888}
          width="666px"
        >
          <div style={{ border: '1px solid #e8e8e8', padding: '15px' }}>
            <BraftEditor ref={instance => this.editorInstance = instance} {...editorProps} />
          </div>
        </Modal>
      </Wrapper>
    );
  }
}
